<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>


    <meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Using ContainerEffect Transitions</title>

<style type="text/css">
/*margin and padding on body element
  can introduce errors in determining
  element position and are not recommended;
  we turn them off as a foundation for YUI
  CSS treatments. */
body {
	margin:0;
	padding:0;
}
</style>

<link rel="stylesheet" type="text/css" href="http://presentbright.corp.yahoo.com/yui2/latest_build/build/fonts/fonts-min.css" />
<link rel="stylesheet" type="text/css" href="http://presentbright.corp.yahoo.com/yui2/latest_build/build/container/assets/skins/sam/container.css" />
<script type="text/javascript" src="http://presentbright.corp.yahoo.com/yui2/latest_build/build/yahoo-dom-event/yahoo-dom-event.js"></script>

<script type="text/javascript" src="http://presentbright.corp.yahoo.com/yui2/latest_build/build/animation/animation-min.js"></script>
<script type="text/javascript" src="http://presentbright.corp.yahoo.com/yui2/latest_build/build/container/container-min.js"></script>

<!--there is no custom header content for this example-->

</head>

<body class="yui-skin-sam">


<h1>Using ContainerEffect Transitions</h1>

<div class="exampleIntro">
	<p>The <a href="http://developer.yahoo.com/yui/container/">Container Family</a> of controls, including <a href="http://developer.yahoo.com/yui/container/overlay/">Overlay</a> and all of its subclasses (<a href="http://developer.yahoo.com/yui/container/panel/">Panel</a>, <a href="http://developer.yahoo.com/yui/container/tooltip/">Tooltip</a>, <a href="http://developer.yahoo.com/yui/container/dialog/">Dialog</a>, <a href="http://developer.yahoo.com/yui/container/simpledialog/">SimpleDialog</a>), can implement built-in transition effects using the <code>effect</code> property and the <a href="http://developer.yahoo.com/yui/docs/YAHOO.widget.ContainerEffect.html">ContainerEffect</a> object.  This example demonstrates the fade and slide transitions provided with Container.</p>

<p>Use the buttons below to show and hide Overlays, noting their transition treatments as they appear and disappear.</p>			
</div>

<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->

<style>
.yui-overlay { position:absolute;border:1px dotted black;padding:5px;margin:10px;background:#fff; }
.yui-overlay .hd { border:1px solid red;padding:5px; }
.yui-overlay .bd { border:1px solid green;padding:5px; }
.yui-overlay .ft { border:1px solid blue;padding:5px; }
</style>

<script>
YAHOO.namespace("example.container");

function init() {
	// Build overlay1 based on markup
	YAHOO.example.container.overlay1 = new YAHOO.widget.Overlay("overlay1", 
                { xy:[350,100], visible:false,  width:"300px", zIndex:1000,  effect:{effect:YAHOO.widget.ContainerEffect.FADE,duration:0.25} } );
	YAHOO.example.container.overlay1.render("example");

	// Build overlay2 based on markup
	YAHOO.example.container.overlay2 = new YAHOO.widget.Overlay("overlay2",
               { xy:[350,100], visible:false, width:"300px", zIndex:1000, effect:{effect:YAHOO.widget.ContainerEffect.SLIDE,duration:0.25} } );
	YAHOO.example.container.overlay2.render("example");

	// Build overlay3 based on markup
	YAHOO.example.container.overlay3 = new YAHOO.widget.Overlay("overlay3",
                { xy:[350,100], visible:false, width:"300px", zIndex:1000, effect:[{effect:YAHOO.widget.ContainerEffect.FADE,duration:0.5},
		  {effect:YAHOO.widget.ContainerEffect.SLIDE,duration:0.5}] } );
	YAHOO.example.container.overlay3.render("example");

	YAHOO.util.Event.addListener("show1", "click", YAHOO.example.container.overlay1.show, YAHOO.example.container.overlay1, true);
	YAHOO.util.Event.addListener("hide1", "click", YAHOO.example.container.overlay1.hide, YAHOO.example.container.overlay1, true);

	YAHOO.util.Event.addListener("show2", "click", YAHOO.example.container.overlay2.show, YAHOO.example.container.overlay2, true);
	YAHOO.util.Event.addListener("hide2", "click", YAHOO.example.container.overlay2.hide, YAHOO.example.container.overlay2, true);

	YAHOO.util.Event.addListener("show3", "click", YAHOO.example.container.overlay3.show, YAHOO.example.container.overlay3, true);
	YAHOO.util.Event.addListener("hide3", "click", YAHOO.example.container.overlay3.hide, YAHOO.example.container.overlay3, true);

/******
        var onAnimate = new YAHOO.util.CustomEvent("onAnimate");
//        YAHOO.example.container.overlay2.handleStartAnimateIn("onAnimate");
        YAHOO.example.container.overlay2.handleStartAnimateIn = function(type, args, obj) {
          alert('animate in');
        };

        onAnimate.subscribe(cb);
        YAHOO.example.container.overlay2.beforeMoveEvent.subscribe( function() {

        var cb = function(type, args, me) {
           alert(" this: " + this + 
            "\n this.name: " + this.name + 
            "\n type: " + type + 
            "\n args[0].data: " + args[0].data + 
            "\n me.name: " + me.name); 
          };
*****/

        zzeffect = YAHOO.example.container.overlay2.cfg.getProperty("effect");
        zzeffect.animIn.onStart.subscribe(function(){ alert("startingAnim") });

/*******
//        YAHOO.example.container.overlay2.beforeAnimateInEvent.subscribe( function() {
        YAHOO.example.container.overlay2.beforeMoveEvent.subscribe( function() {
           var r = '';
           for(var i=0; i<arguments.length; i++) {
	      r += arguments[i] + '::';
           }
           alert('start::'+r);
        } );
********/
}
var zzeffect;
YAHOO.util.Event.onDOMReady(init);
</script>

<div>
overlay1 (fade in):
<button id="show1">Show</button>

<button id="hide1">Hide</button>
</div>
<div>
overlay2 (slide in):
<button id="show2">Show</button>
<button id="hide2">Hide</button>
</div>
<div>
overlay3 (fade and slide):
<button id="show3">Show</button>
<button id="hide3">Hide</button>

</div>

<div id="overlay1" style="visibility:hidden;">
<div class="hd">Overlay #1 from Markup</div>
<div class="bd">This is a Overlay that was marked up in the document.</div>
<div class="ft">End of Overlay #1</div>
</div>

<div id="overlay2" style="visibility:hidden;">
<div class="hd">Overlay #2 from Markup</div>
<div class="bd">This is a Overlay that was marked up in the document.</div>
<div class="ft">End of Overlay #2</div>

</div>

<div id="overlay3" style="visibility:hidden;">
<div class="hd">Overlay #3 from Markup</div>
<div class="bd">This is a Overlay that was marked up in the document.</div>
<div class="ft">End of Overlay #3</div>
</div>

<!--END SOURCE CODE FOR EXAMPLE =============================== -->

</body>
</html>
